<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title>CodePen - Magnific Gallery V2</title>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">
<link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/photoswipe/4.1.2/photoswipe.css'>
<link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/photoswipe/4.1.2/default-skin/default-skin.min.css'>
<link rel="stylesheet" href="./camera_gallery.css">

</head>
<body>
<!-- partial:index.partial.html -->
<div class="gallery" itemscope="" itemtype="http://schema.org/ImageGallery">
  <figure class="gallery-item horizontal"><a href="https://photo.tuchong.com/27109506/f/1273376718.jpg" data-size="1200x800"><img class="lazyload lazypreload fadein" src="https://photo.tuchong.com/27109506/f/1273376718.jpg" referrerpolicy="no-referrer"/></a>
    <figcaption class="gallery-caption">绿叶</figcaption>
  </figure>
  <figure class="gallery-item vertical"><a href="https://photo.tuchong.com/27109506/f/1298149364.jpg" data-size="573x920"><img class="lazyload lazypreload fadein" src="https://photo.tuchong.com/27109506/f/1298149364.jpg" referrerpolicy="no-referrer"/></a>
    <figcaption class="gallery-caption">小城故事</figcaption>
  </figure>
  <figure class="gallery-item horizontal"><a href="https://photo.tuchong.com/27109506/f/1217408899.jpg" data-size="1200x800"><img class="lazyload lazypreload fadein" src="https://photo.tuchong.com/27109506/f/1217408899.jpg" referrerpolicy="no-referrer"/></a>
    <figcaption class="gallery-caption">盆栽</figcaption>
  </figure>
  <figure class="gallery-item vertical"><a href="https://photo.tuchong.com/27109506/f/684208034.jpg" data-size="583x875"><img class="lazyload lazypreload fadein" src="https://photo.tuchong.com/27109506/f/684208034.jpg" referrerpolicy="no-referrer"/></a>
    <figcaption class="gallery-caption">背影</figcaption>
  </figure>
 </div>
<!-- Root element of PhotoSwipe. Must have class pswp.-->
<div class="pswp" tabindex="-1" role="dialog" aria-hidden="true">
  <!--
  Background of PhotoSwipe.
  It's a separate element as animating opacity is faster than rgba().
  -->
  <div class="pswp__bg"></div>
  <!-- Slides wrapper with overflow:hidden.-->
  <div class="pswp__scroll-wrap">
    <!--
    Container that holds slides.
    PhotoSwipe keeps only 3 of them in the DOM to save memory.
    Don't modify these 3 pswp__item elements, data is added later on.
    -->
    <div class="pswp__container">
      <div class="pswp__item"></div>
      <div class="pswp__item"></div>
      <div class="pswp__item"></div>
    </div>
    <!-- Default (PhotoSwipeUI_Default) interface on top of sliding area. Can be changed.-->
    <div class="pswp__ui pswp__ui--hidden">
      <div class="pswp__top-bar">
        <!-- Controls are self-explanatory. Order can be changed.-->
        <div class="pswp__counter"></div>
        <button class="pswp__button pswp__button--close" title="关闭 (Esc)"></button>
        <button class="pswp__button pswp__button--share" title="分享"></button>
        <button class="pswp__button pswp__button--fs" title="全屏"></button>
        <button class="pswp__button pswp__button--zoom" title="放大/缩小"></button>
        <!-- Preloader demo http://codepen.io/dimsemenov/pen/yyBWoR-->
        <!-- element will get class pswp__preloader--active when preloader is running-->
        <div class="pswp__preloader">
          <div class="pswp__preloader__icn">
            <div class="pswp__preloader__cut">
              <div class="pswp__preloader__donut"></div>
            </div>
          </div>
        </div>
      </div>
      <div class="pswp__share-modal pswp__share-modal--hidden pswp__single-tap">
        <div class="pswp__share-tooltip"></div>
      </div>
      <button class="pswp__button pswp__button--arrow--left" title="上一张 (arrow left)"></button>
      <button class="pswp__button pswp__button--arrow--right" title="下一张 (arrow right)"></button>
      <div class="pswp__caption">
        <div class="pswp__caption__center"></div>
      </div>
    </div>
  </div>
</div>
<!-- partial -->
  <script src='https://cdnjs.cloudflare.com/ajax/libs/lazysizes/4.0.2/lazysizes.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/photoswipe/4.1.2/photoswipe.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/photoswipe/4.1.2/photoswipe-ui-default.js'>
</script><script  src="./camera_gallery.js"></script>

</body>
</html>
